<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
<!--  <meta http-equiv="imagetoolbar" content="no" />-->
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title>10100 Maps</title>
      <script type="text/javascript" src="http://maps.visicom.ua/api/2.0.0/map/world_ru.js"></script>
      <script type="text/javascript" src="10100ckua.js"></script>
      <script type="text/javascript">
      
      
      function setCoordinates() {
         var params = 'lat=' + map.center().lat 
         + '&lng=' + map.center().lng 
         + '&zoom=' + map.zoom()
         + '&type=' + 'map';
         if (marker.visible()) {
            params += '&mlat=' + marker.coords()[0].lat 
                    + '&mlng=' + marker.coords()[0].lng;
         }
         fillTheUrl(params, 'google-maps');
         fillTheUrl(params, 'google-maps-mobile');
         fillTheUrl(params, 'yandex-maps');
         fillTheUrl(params, 'visicom-maps');
         setLinkUrl();
      }

      function processMarker() {
         if (marker.visible()) {
            marker.visible(false);
         } else {
            marker.coords(map.center());
            marker.visible(true);
         }
         setCoordinates();
         markerButtons();
         map.repaint();
      }

      function initialize() {

         var lat = getParameter('lat');
         if (lat == null || isNaN(lat))
            lat = def_lat;
         var lng = getParameter('lng');
         if (lng == null || isNaN(lat))
            lng = def_lng;
         var z = parseInt(getParameter('zoom'));
         if (z == null || isNaN(z))
            z = def_zoom;


		 var mapCenter = {lng: lng, lat: lat};
         
         var mlat = getParameter('mlat');
         var mlng = getParameter('mlng');

         var markerCoordinates = null;
         if (mlat != null && !isNaN(mlat) && mlng != null && !isNaN(mlng)) {
            markerCoordinates = {lng: mlng, lat: mlat};
         }
         
         map = new VMap(document.getElementById('map_canvas'));
         map.center(mapCenter, z);


         // Create marker
         marker = new VMarker(markerCoordinates);

         marker.visible(markerCoordinates != null ? true : false);
         
         // Set draggable option
         marker.draggable(true);
         // The hint
         //marker.hint('Hint');
           
         // Set header and description of information window
         //marker.info('header', 'Description');
          
         // Add a marker on the map
         map.add(marker);
         // Repaint the map
         map.repaint();

         marker.enddrag(setCoordinates);
         
         
         setCoordinates();

         initMarkerButtons(marker.visible());
         initStyleButtons();

         map.enddrag(setCoordinates);
         map.onzoomchange(setCoordinates);
         
      }
      </script>
   </head>
  <body onload="initialize()">
      <div id="map_canvas" style="width: 500px; height: 300px;">
         <a id="visicom_copyright_link" href="http://maps.visicom.ua/">карта</a>
      </div>
      
      <div id="div_url" style="width: 500px; height: 30px">
         <input id="textlink" value="" title="линк" size="60" type="text" maxlength="2048" spellcheck="false" /><br/>
      </div>
      <div id="map_links" style="width: 500px; height: 120px">
         <table border="0" cellpadding="10" cellspacing="0">
            <tr valign="top">
            <td><a href="google-maps.html" id="google-maps">
               <img border="0" src="images/google.jpg"><br/>
               google</a><br/></td>
            <td><a href="yandex-maps.html" id="yandex-maps" >
               <img border="0" src="images/yandex.jpg"><br/>
               yandex</a><br/></td>
            <td><a href="visicom-maps.html" id="visicom-maps" >
               <img border="0" src="images/visicom.jpg"><br/>
               visicom</a><br/></td>
            <td><a href="google-maps-mobile.html" id="google-maps-mobile">
               <img border="0" src="images/google.jpg"><br/>
               google<br/> mobile</a><br/></td>
            </tr>
         </table>
      </div>
      <div id="map_links_old" style="width: 500px; height: 120px;">
         <a href="google-maps.html" id="google-maps">google</a><br/>
         <a href="visicom-maps.html" id="visicom-maps" >visicom</a><br/>
         <a href="yandex-maps.html" id="yandex-maps" >yandex</a><br/>
         <a href="google-maps-mobile.html" id="google-maps-mobile">google mobile</a><br/>
      </div>
      <form> 
         <input id="setmarker" type="button" value="Set Marker" name="button1" onClick="processMarker()">
         <input id="removemarker" type="button" value="Remove Marker" name="button2" onClick="processMarker()">  
      </form>
      <br/>
      <form>
         <input id="newstyle" type="button" value="New style" name="buttonNewStyle" onClick="styleButtons()">  
         <input id="oldstyle" type="button" value="Old style" name="buttonOldStyle" onClick="styleButtons()">
      </form>
      
   </body>
</html>
